<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-11 15:26:59
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2022-06-07 09:37:51
 * @FilePath: \jzjypc4.0\src\views\PersonalCenter\PersonalMsg\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 个人中心/我的教学计划 -->
  <div id="container">
    <div class="content">
      <div class="top">
        <span></span>
        <h3>我的教学计划</h3>
      </div>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="列表视图" name="1">
          <div class="tableBox">
            <div class="tabHead">
              <h3>我的教学计划</h3>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span @click="dialogVisible = true"
                ><i class="el-icon-edit">修改教学计划</i></span
              >

              <div class="editPlan">
                <el-dialog
                  :visible.sync="dialogVisible"
                  width="960px"
                  :close-on-click-modal="tipsClose"
                >
                  <h2>我的教学计划</h2>
                  <div class="choseGrade">
                    <p>选择教学年级</p>
                    <el-radio-group v-model="radio1">
                      <el-radio :label="1">高一</el-radio>
                      <el-radio :label="2">高二</el-radio>
                      <el-radio :label="3">高三</el-radio>
                    </el-radio-group>
                  </div>
                  <div class="choseClass">
                    <p>选择学科版本</p>
                    <el-radio-group v-model="radio2">
                      <el-radio :label="1">统编版2020</el-radio>
                      <el-radio :label="2">北师大版2019</el-radio>
                      <el-radio :label="3">译林版2020</el-radio>
                      <el-radio :label="4">人教版2019</el-radio>
                    </el-radio-group>
                  </div>
                  <div class="myPlan">我的教学计划：</div>
                  <div class="tableHeadr">
                    <div class="plan">
                      <i class="el-icon-document"></i>
                      <p>教学计划</p>
                    </div>
                    <div class="time">
                      <i class="el-icon-date"></i>
                      <p>教学时间</p>
                    </div>
                  </div>
                  <el-collapse v-model="activeNames" accordion>
                    <el-collapse-item name="1">
                      <template slot="title">
                        <div class="title">
                          <h4>必修一 上册</h4>
                        </div>
                      </template>
                      <div class="danyuan" v-for="item in 8" :key="item">
                        <h5>第一单元</h5>
                        <el-date-picker
                          v-model="value1"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                        >
                        </el-date-picker>
                      </div>
                    </el-collapse-item>
                    <el-collapse-item name="2">
                      <template slot="title">
                        <div class="title">
                          <h4>必修一 上册</h4>
                        </div>
                      </template>
                      <div class="danyuan" v-for="item in 8" :key="item">
                        <h5>第一单元</h5>
                        <el-date-picker
                          v-model="value1"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                        >
                        </el-date-picker>
                      </div>
                    </el-collapse-item>
                    <el-collapse-item name="3">
                      <template slot="title">
                        <div class="title">
                          <h4>必修一 上册</h4>
                        </div>
                      </template>
                      <div class="danyuan" v-for="item in 8" :key="item">
                        <h5>第一单元</h5>
                        <el-date-picker
                          v-model="value1"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                        >
                        </el-date-picker>
                      </div>
                    </el-collapse-item>
                    <el-collapse-item name="4">
                      <template slot="title">
                        <div class="title">
                          <h4>必修一 上册</h4>
                        </div>
                      </template>
                      <div class="danyuan" v-for="item in 8" :key="item">
                        <h5>第一单元</h5>
                        <el-date-picker
                          v-model="value1"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                        >
                        </el-date-picker>
                      </div>
                    </el-collapse-item>
                    <el-button @click="dialogVisible = false" class="submit">
                      保存提交
                    </el-button>
                  </el-collapse>
                </el-dialog>
              </div>
            </div>
            <el-table :data="tableData" border style="width: 840px" stripe>
              <el-table-column prop="plan" label="教学计划" width="419">
              </el-table-column>
              <el-table-column prop="date" label="教学时间" width="420">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="甘特视图" name="2">
          <div class="tableBox">
            <div class="tabHead">
              <h3>我的教学计划</h3>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span><i class="el-icon-edit">修改教学计划</i></span>
            </div>
            <el-table :data="tableData" border style="width: 840px" stripe>
              <el-table-column prop="plan" label="教学计划" width="419">
              </el-table-column>
              <el-table-column prop="date" label="教学时间" width="420">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "changeClass",
  components: {},
  data() {
    return {
      tipsClose: false,
      dialogVisible: false,
      activeName: "1",
      radio1: 1,
      radio2: 1,
      activeNames: ["1"],
      tableData: [
        {
          plan: "开学日",
          date: "2016-05-02",
        },
        {
          plan: "选择性必修上 第一单元  上册",
          date: "2016-05-04",
        },
        {
          plan: "选择性必修上 第一单元  下册",
          date: "2016-05-01",
        },
        {
          plan: "必修一第二章节学习总结",
          date: "2016-05-03",
        },
        {
          plan: "选择性必修上 第二单元  上册",
          date: "2016-05-03",
        },
        {
          plan: "选择性必修上 第二单元  下册",
          date: "2016-05-03",
        },
        {
          plan: "必修一第二章节学习总结",
          date: "2016-05-03",
        },
        {
          plan: "选择性必修上 第三单元  上册",
          date: "2016-05-03",
        },
      ],
      options: [
        {
          value: "1",
          label: "高一",
        },
        {
          value: "2",
          label: "高二",
        },
        {
          value: "3",
          label: "高三",
        },
      ],
      value: "1",
      value1: "",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="less" scoped>
#container {
  .content {
    user-select: none;
    .top {
      display: flex;
      margin: 30px 0px 40px 30px;
      span {
        display: inline-block;
        position: relative;
        top: 5px;
        margin-right: 10px;
        width: 3px;
        height: 20px;
        background: #08a579;
        border-radius: 2px;
      }
      h3 {
        font-size: 20px;
      }
    }
    .el-tabs {
      margin-left: 40px;
      .tabHead {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 30px;
        width: 838px;
        height: 48px;
        background: #f0f2f5;
        border: 1px solid #dee0e3;
        border-radius: 10px 10px 0px 0px;
        .editPlan {
          position: relative;

          /deep/.el-dialog {
            margin-top: 5vh !important;
            overflow: hidden;
            width: 960px;
            height: 836px;
            background: #ffffff;
            border-radius: 20px;
            //height:2000px;
          }
          /deep/.el-dialog__body {
            overflow: hidden;
            height: 100%;
            padding: 0;
            margin: 0 60px;

            h2 {
              margin-bottom: 30px;
              text-align: center;
              font-size: 20px;
              color: #333;
            }
            .choseGrade {
              display: flex;
              margin-bottom: 30px;
              p {
                margin-right: 60px;
                font-size: 14px;
                color: #646566;
              }
              .el-radio {
                margin-right: 60px;
                margin-top: 3px;
              }
            }
            .choseClass {
              display: flex;
              margin-bottom: 30px;
              p {
                margin-right: 60px;
                font-size: 14px;
                color: #646566;
              }
              .el-radio {
                margin-right: 22px;
                margin-top: 3px;
              }
            }
            .myPlan {
              margin-bottom: 18px;
            }
            .tableHeadr {
              display: flex;
              width: 838px;
              border: 1px solid #dee0e3;
              border-bottom: 0;
              height: 40px;
              font-size: 14px;
              background-color: #fafafa;
              div {
                display: flex;
                width: 420px;
                line-height: 40px;
                i {
                  margin-left: 20px;
                  margin-right: 6px;
                  line-height: 40px;
                }
              }
              .plan {
                border-right: 1px solid #dee0e3;
              }
            }
            .el-collapse {
              width: 840px;
              height: 40px;
              background: #fafafa;
              .submit {
                position: relative;
                left: 680px;
                top: 20px;
                width: 120px;
                height: 40px;
                background: #08a579;
                border-radius: 4px;
                color: #ffffff;
                font-size: 14px;
              }
              .el-collapse-item__header {
                height: 40px;
                border: 1px solid #dee0e3;
                border-top: 0;
              }
              .el-collapse-item__content {
                padding: 0;
              }
              .el-collapse-item__wrap {
                border: 0;
              }
              .title {
                border: 0;
                h4 {
                  margin-left: 20px;
                  width: 420px;
                  color: #646566;
                  line-height: 40px;
                }
              }
              .danyuan {
                display: flex;
                justify-content: space-between;
                width: 838px;
                border: 1px solid #dee0e3;
                border-top: 0;
                height: 40px;
                line-height: 40px;
                h5 {
                  margin-left: 40px;
                  border-right: 1px solid #dee0e3;
                  width: 380px;
                  color: #646566;
                }
                .el-input__inner {
                  margin-top: 5px;
                  border: 0;
                }
              }
              .danyuan:nth-of-type(2n-1) {
                background-color: #fafafa;
              }
            }
          }
        }

        h3 {
          margin-left: 20px;
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
        .el-select {
          margin-right: 500px;
          width: 72px;
          height: 28px;
        }
        /deep/.el-select .el-input__inner {
          border-radius: 20px;
          padding-left: 13px;
          padding-right: 22px;
        }
        span {
          width: 128px;
          height: 28px;
          background: #ebfaf5;
          border-radius: 14px;
          color: #08a579;
          line-height: 28px;
           i {
            margin-left: 12px;
          }
        }
      }
    }
  }
}
</style>
